import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux'
import _ from 'lodash'

import { Table, Icon, Tag, Form,  Button, message, Modal, Input} from 'antd';
import { changePage, check_rules } from '../../store/actions';
import DataDictionaryEdit from '../../components/formEditDataDictionary'
const _data_={
    title :[
    {
        name:'职称0',
        id:'title_000',
        desc:'职称数据0',
        code:0
    },{
        name:'职称1',
        id:'title_001',
        desc:'职称数据1',
        code:0
    },{
        name:'职称2',
        id:'title_002',
        desc:'职称数据2',
        code:0
    }

    ],department : [
    {
        name:'脑外科',
        id:'department_000',
        desc:'脑外科',
        code:0
    },{
        name:'心脏外科',
        id:'department_001',
        desc:'心脏外科',
        code:0
    },{
        name:'血管内科',
        id:'department_002',
        desc:'血管内科',
        code:0
    }

    ],modality : [
    {
        name:'CT',
        id:'modality_000',
        desc:'CT描述',
        code:0
    },{
        name:'CR',
        id:'modality_001',
        desc:'CR描述',
        code:0
    },{
        name:'MR',
        id:'modality_002',
        desc:'MR描述',
        code:0
    }
]};
class _DataDictionaryList extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            data:[],
            visible:false,
            title:'',
            modalInitial:'',
            confirmLoading: false
        };
        this.onSelectChange = this.onSelectChange.bind(this);
        this.reFetch = this.reFetch.bind(this);
        this.Edit = this.Edit.bind(this);
        this.delData = this.delData.bind(this);
    }
    componentWillMount(){
        /* 获取数据项数据 */
        const dataType = this.props.params.id;
        this.setState({
            data:_data_[dataType]
        })
    }
    componentWillReceiveProps(nextProp){
        /* 重新获取数据项数据 */
        const dataType = nextProp.params.id;
        this.setState({
            data:_data_[dataType]
        })
    }
    onSelectChange(selectedRowKeys) {
        this.setState({ selectedRowKeys });
    }
    reFetch(v){
       /* 重新获取数据 */
    }
    delOk(){}
    delData(e){
        e.preventDefault();
        const _t = e.target.dataset;
        const modalOpts = {
            title:'删除数据项',
            content: `要删除 ${_t.name} 吗？`,
            okText: ` 删除 `,
            onOk:this.delOk.bind(this)
        };
        Modal.confirm({...modalOpts})
    }
    static contextTypes = {
        router: React.PropTypes.object
    };
    addData(){
        this.setState({
            visible:true,
            title:'新建',
            targetData:null
        });
    }
    Edit(e){
        e.preventDefault();
        const _t = e.target.dataset;
        const targetData = _.filter(this.state.data,{id:_t.id})[0];
        this.setState({
            visible:true,
            title:'新建',
            targetData:targetData
        });
    }
    onCancel(){
        this.setState({
            visible:false
        })
    }
    onOk(){
        this.setState({
            visible:false
        })
    }
    render(){
        const columns = [{
            title: '名称',
            dataIndex: 'name',
            width:200
        }, {
            title: '序号',
            dataIndex: 'code',
            width:100
        }, {
            title: '描述',
            dataIndex: 'desc'
        }, {
            title: '操作',
            width:100,
            render: (text, record) => {
                return (
                    <div>
                        <a href="#" data-name={`${record.name}`} data-id={`${record.id}`} onClick={this.delData}>删除</a>
                        <span className="ant-divider"> </span>
                        <a href="#" data-id={`${record.id}`} onClick={this.Edit}>编辑</a>
                    </div>
                );
            }
        }];

        const dataLen = this.state.imagesLen;
        const pagination = {
            total: dataLen,
            showSizeChanger: true,
            onShowSizeChange(current, pageSize) {},
            onChange(current) {}
        };

        const rowSelection = {};
        return (
            <div id="">
                <h3>{this.props.params.id}</h3>
                <Button onClick={this.addData.bind(this)}>新建</Button>
                <Table
                    rowSelection={rowSelection}
                    columns={columns}
                    dataSource={this.state.data}
                    pagination={pagination}
                />
                <DataDictionaryEdit
                    visible = {this.state.visible}
                    title = {this.state.title}
                    confirmLoading = {this.state.confirmLoading}
                    targetData = {this.state.targetData}
                    onCancel = {this.onCancel.bind(this)}
                />
            </div>
        )
    }
}
_DataDictionaryList = Form.create()(_DataDictionaryList);
let DataDictionaryList ;
export default DataDictionaryList = connect((state)=>{
    const {user} = state.rootReducer;
    return {user}
})(_DataDictionaryList)